/**
 * @file productmanagement/edit.js
 *  产品信息编辑详情
 * @author chnejie
 */


import React, {Component,PropTypes} from 'react';
import {connect} from 'dva';
import {routerRedux,withRouter } from 'dva/router';
import { Form, Input,Breadcrumb,Card,Radio, Checkbox, Button, Row, Col,Select } from 'antd';
import {netValueFrequency} from '../../../utils/dataConfig';
 
import styles from './pdtEdit.less';

const FormItem = Form.Item;
const Option = Select.Option;
const FORM_ITEM_LAYOUT = {
	labelCol: {
		xl:{
			span:8
		},
		lg:{
			span:8
		},
		xs: {
			span: 4,
		},
		sm: {
			span: 4,
		},
	},
	wrapperCol: {
		xl:{
			span:8
		},
		lg:{
			span:8
		},
		sm: {
			span: 10,
		},
		xs: {
			span: 8,
		},
	},
};

const Pdtedit = ({
	dispatch, 
	pdtedit,
	location,
	form: { 
		getFieldDecorator,
		validateFields,
		getFieldsValue },
	})=>{
	if(pdtedit.status){
		const { pdtlist } = pdtedit;
		function handleSubmit(e) {
			e.preventDefault();
			validateFields((err, fieldsValue) => {
				if (err) {
					return;
				}
				console.log('fieldsValue>>>',fieldsValue)
				const productId = pdtlist.productId
				const productName = fieldsValue.productName
				const origProductType = fieldsValue.origProductType
				const description = fieldsValue.description
				const isIncludeCash = +fieldsValue.isIncludeCash
				const navFreq = fieldsValue.navFreq
				dispatch({
					type: 'pdtedit/savePdtEdit',
					payload: {
						productName,
						origProductType,
						description,
						productId,
						isIncludeCash,
						navFreq
					}
				})
			})

		}
		function handleBacktrack(){
			dispatch(routerRedux.push({
				pathname:`/systemMgt/accountMgt/pdtMgt?name=${pdtlist.productCode}`,
			}))
		}
		return (
			<div>
				<div className={styles.breaddiv}>
					<Breadcrumb separator=">">
						<Breadcrumb.Item  className={styles.breadcr}>产品管理</Breadcrumb.Item>
						<Breadcrumb.Item>{pdtlist.productCode}</Breadcrumb.Item>
					</Breadcrumb>
				</div>
				<div className="page-pdtedit-home content-inner" style={{ background: '#ECECEC', padding: '30px' }}>
					<Card>
					<Form onSubmit={handleSubmit} >
						<FormItem
							{...FORM_ITEM_LAYOUT}
							label="产品code"
						>
						{getFieldDecorator(
							'productCode',
							{
								initialValue: pdtlist.productCode,
							},
						)(
							<Input disabled />,
						)}
					</FormItem>
					<FormItem
						{...FORM_ITEM_LAYOUT}
						label="产品名称"
					>
						{getFieldDecorator(
							'productName',
							{
								rules: [
								  { required: true, whitespace: true, message: '请输入产品名称!' },
								],
								initialValue: pdtlist.productName,
							},
						)(
							<Input />,
							)}
					</FormItem>

					<FormItem
						{...FORM_ITEM_LAYOUT}
						label="产品类别"
					>
						{getFieldDecorator(
							'origProductType',
							{
								rules: [
								  { required: true, whitespace: true, message: '请输入产品类别!' },
								],
								initialValue: pdtlist.origProductType,
							},
						)(
							<Input />,
							)}
					</FormItem>
					<FormItem
						{...FORM_ITEM_LAYOUT}
					 	label="是否考虑现金"
					>
						{getFieldDecorator('isIncludeCash',{
							rules: [
							  { required: true, message: '请选择是否考虑现金!' },
							],
								initialValue: pdtlist.isIncludeCash,
						})(
							<Radio.Group>
                <Radio value='1'>是</Radio>
                <Radio value='0'>否</Radio>
              </Radio.Group>
							)}
					</FormItem>
					<FormItem
						{...FORM_ITEM_LAYOUT}
						label="可用资金"
					>
						{getFieldDecorator(
							'availableCash',
							{
								initialValue: pdtlist.availableCash ,
							},
						)(
							<Input disabled/>,
							)}
					</FormItem>
					<FormItem
						{...FORM_ITEM_LAYOUT}
						label="当前保证金"
					>
						{getFieldDecorator(
							'bondCash',
							{
								initialValue: pdtlist.bondCash,
							},
						)(
							<Input disabled/>,
							)}
					</FormItem>
					
					<FormItem
						{...FORM_ITEM_LAYOUT}
						label="股票费率 (%)"
					>
						{getFieldDecorator(
							'sharesRate',
							{
								initialValue: pdtlist.sharesRate,
							},
						)(
								<Input
									disabled
								/>
							)}
					</FormItem>

					<FormItem
						{...FORM_ITEM_LAYOUT}
						label="期货费率 (%)"
					>
						{getFieldDecorator(
							'futuresRate',
							{
								initialValue: pdtlist.futuresRate,
							},
						)(
								<Input
									disabled
								/>
							)}
					</FormItem>
					<FormItem
						{...FORM_ITEM_LAYOUT}
						label="保证金比例 (%)"
					>
						{getFieldDecorator(
							'bondRate',
							{
								initialValue: pdtlist.bondRate,
							},
						)(
								<Input
									disabled
								/>
							)}
					</FormItem>
					<FormItem
						{...FORM_ITEM_LAYOUT}
						label="生效时间"
					>
						{getFieldDecorator(
							'effectiveDate',
							{
								initialValue: pdtlist.effectiveDate,
							})(
								<Input disabled />,
						)}
					</FormItem>
					<FormItem
						{...FORM_ITEM_LAYOUT}
						label="净值频率"
					>
						{getFieldDecorator(
							'navFreq',
							{
								initialValue: pdtlist.navFreq,
							})(
							<Select>
              	{
              		netValueFrequency.map((item,i)=><Option value={`${item.value}`} key={i}>{item.name}</Option>)
              	}
              </Select>
						)}
					</FormItem>
					<FormItem
						{...FORM_ITEM_LAYOUT}
						label="产品描述"
					>
						{getFieldDecorator(
							'description',
							{
								initialValue: pdtlist.description,
							})(
								<Input/>,
						)}
					</FormItem>
					<FormItem
						wrapperCol={{
							xl: { span: 16, offset: 7 },
							lg: { span: 16, offset: 7 },
							xs: { span: 8, offset: 4 },
							sm: { span: 6, offset: 7 },
						}}
					>
						<Row type="flex" justify="center" align="top">
							<Col span={6} sm={{ span: 6, pull: 3 }} lg={{ span: 6, push: 1 }}>
								<Button type="primary" htmlType="submit" size="large" >提交</Button>
							</Col>
							<Col span={6} xs={{ span: 6, offset: 2 }} lg={{ span: 6, pull: 3 }}>
								<Button type="primary" size="large" onClick={handleBacktrack}>取消</Button>
							</Col>
						</Row>
					</FormItem>
					</Form>
					</Card>
				</div> 
			</div>
		)
	}else{
		return null
	}
}

Pdtedit.propTypes = {
	form: PropTypes.object.isRequired,
}

export default connect(({pdtedit})=>({pdtedit}))(Form.create()(Pdtedit))

